<template>
  <div>
    <main-layout>
      <div class="list-container">
        <vTable   
              ref="vGridTable"
              :columnsList="columnsList"
              addCode="13003"
              addText="添加"
              apiUrl="/boss/exp-user-address/exp-user-address-list"
              :pageSize="15"
              :formConfig="formConfig"
              :toolbarConfig="false"
              @saveClick="openAdd"
              @switchChange="switchChange">
              
              <template #cells="{row}">
                {{row.receiverName}} <el-tag v-if="row.isDefault">默认地址</el-tag>
                </template>
              <template #actions="{row}">
                    <el-button type="text" class="btn-eidt" icon="edit" size="small" @click="goEdit(row)">编辑</el-button>
                    <el-button type="text" class="btn-del" icon="edit" size="small" @click="btnDel(row)">删除</el-button>
                    <el-button v-if="!row.isDefault" class="autoBtn btn-view" icon="Lock" size="small" @click="setDefault(row)">默认地址</el-button>
                </template>
          </vTable>
      </div>
    </main-layout>
    <addView v-if="addFlag" :show="addFlag" :editData="editData" @success="refreshTable" @close="addFlag=false" />
  </div>
</template>

<script setup name="Account-List">
import { nextTick, ref, watch, onActivated, reactive, onMounted,computed} from 'vue'
import mainLayout from '@/components/custom/mainLayout.vue'
import { useUserStore } from '@/pinia/modules/user'
import { VXETable } from 'vxe-table'
import addView from './components/add.vue'
import {defaultAddress,deleteAddress} from '@/api/system'
const userStore = useUserStore()
const vGridTable = ref(null)
const addFlag = ref(false)
const editData = ref({})

const  formConfig = computed(
    ()=>{
    return {
        titleWidth: 100,
        titleAlign: 'center',
        items: [
        {
            field: 'receiverName',
            title: '姓名',
            span: 5,
            itemRender: {name: '$input', props: {placeholder: '姓名', clearable: true}}
          },
          {
            field: '',
            title: '',
            span: 5,
            className:'from-right-btn-add',
            showTitle:false,
            slots: { default: 'addButtom' }
          },
          {
            align: 'center', collapseNode: false,
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'vxe-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'vxe-icon-refresh', content: '重置'},events: { click: (row,data)=>{
                  row.data.dateRange=[]
              }}}
              ]
            }
          }
        ]
      }
   })

const columnsList = ref([
      {type: 'seq', title: '序号',width:'60',align:'center'},
      {field: 'receiverName', title: '姓名',minWidth:'130',align:'left', slots: {default: 'cells'}},
      {field: 'receiverPhone', title: '联系方式',minWidth:'110',align:'left'},
      {field: 'receiverDetailAddress', title: '地址',minWidth:'110',align:'left',slots:{
        default:({row})=>{return [`${row.receiverProvince}/${row.receiverCity}/${row.receiverRegion}/${row.receiverDetailAddress}`]}
      }},
      {field: 'createTime', title: '创建日期',minWidth:'130',align:'left'},
      {title: '操作', width:260,fixed:'right', slots: {default: 'actions'}}
   ])


const refreshTable = () => {
  vGridTable.value.loadData()
}
const btnDel =async (row) => {
  const type = await VXETable.modal.confirm('您确定要删除吗？')
 if(type=='confirm'){
   let res= await deleteAddress([row.userAddressId])
   if(res.success){
    VXETable.modal.message({ content: '删除成功' })
    refreshTable()
   }else{
    VXETable.modal.message({ content: res.message })
   }
 }
}

const openAdd = () => {
  addFlag.value =true
  editData.value = {}
}
const setDefault = async (row) => {
  let res = await defaultAddress({
      isDefault: 1,
      userAddressId: row.userAddressId,
      userId: row.userId
  })
  if(res.success){
    refreshTable()
  }
}



const goEdit = async(item) => {
  editData.value = item
  addFlag.value =true
}

</script>


